<template>
  <div>
    <el-table
      :data="orgtList"
      row-key="id"
      :default-expand-all="isExpandAll"
      :tree-props="{children: 'dson', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="institutionName" label="名称">
        <template slot-scope="scope">
          <el-checkbox
            :key="scope.row.id"
            v-model="selectedIds"
            :label="scope.row.id"
            :indeterminate="scope.row.indeterminate"
            @change="handleCheckboxChange(scope.row,$event)"
          ><span style="margin-left:10px">{{ scope.row.name }}</span></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="institutionFatherName" label="父节点" />
    </el-table>
  </div>
</template>

<script>
import { DataList } from '@/utils/authority11.js'
export default {

  data() {
    return {
      // selectAll: false, // 全选
      isExpandAll: true,
      selectedIds: [], // 已选的所有id
      // orgtList:[
      //   { id: '1', name: '目录1', parentId: '0', dson: [
      //     { id: '1-1', name: '目录1-1', parentId: '1',dson: [
      //       { id: '1-1-1', name: '目录1-1-1', parentId: '1-1',dson: [
      //         { id: '1-1-1-1', name: '目录1-1-1-1', parentId: '1-1-1',dson: null },
      //         { id: '1-1-1-2', name: '目录1-1-1-2', parentId: '1-1-1',dson: null },
      //         { id: '1-1-1-3', name: '目录1-1-1-3', parentId: '1-1-1',dson: null },
      //       ] },
      //        { id: '1-1-2', name: '目录1-1-2', parentId: '1-1',dson: [
      //         { id: '1-1-2-1', name: '目录1-1-2-1', parentId: '1-1-2',dson: null },
      //         { id: '1-1-2-2', name: '目录1-1-2-2', parentId: '1-1-2',dson: null},
      //         { id: '1-1-2-3', name: '目录1-1-2-3', parentId: '1-1-2',dson: null },
      //       ] }
      //     ] }
      //   ] },
      //   { id: '2', name: '目录2', parentId: '0',dson: [
      //    { id: '2-1', name: '目录2-1', parentId: '2',dson: [
      //    { id: '2-1-1', name: '目录2-1-1', parentId: '2-1',dson:null },
      //    ] },
      //   ] },
      //   { id: '3', name: '目录3', parentId: '0',dson:null },
      //   { id: '4', name: '目录4', parentId: '0',dson: null },
      // ],
      orgtList: DataList
    }
  },
  created() {

  },
  methods: {

    handleCheckboxChange(row, checked) {
      if (checked == false) {
        if (row.dson.length != 0) {
          // 取消全选
          this.invertChildrenSelection(row)
        } else {
          // 单个点击取消
          this.updateIndeterminateState(row, checked)
        }
      } else {
        // 全选
        if (row.dson.length != 0) {
          this.selectAllChildren(row)
        } else {
          // 单个点击选中
          this.updateIndeterminateState(row, checked)
        }
      }
      console.log(this.selectedIds)
    },

    // 更新父级选框状态
    updateIndeterminateState(row, flag) {
      let parent = null
      for (let i = 0; i < this.orgtList.length; i++) {
        parent = this.findParent(this.orgtList[i], row.parentId)
        if (parent != null) {
          break
        }
      }
      if (parent != null) {
        if (parent.dson) {
          let checkedChildrenCount = 0
          let indeterminateCount = 0
          for (const child of parent.dson) {
            if (this.selectedIds.includes(child.id)) {
              checkedChildrenCount++
            }
            if (child.indeterminate == true) {
              indeterminateCount++
            }
          }
          if (indeterminateCount > 0) {
            parent.indeterminate = true
          } else {
            parent.indeterminate = false
          }
          //  取消
          if (parent.indeterminate == false && checkedChildrenCount == 0 && indeterminateCount == 0) {
            const ParentIds = this.setParentCheck(parent)
            this.selectedIds = this.selectedIds.filter(id => !ParentIds.includes(id))
          }
          if (checkedChildrenCount > 0 && checkedChildrenCount < parent.dson.length && indeterminateCount == 0) {
            // 选中一个或多个
            parent.indeterminate = true
            //  取消一个或多个
            if (!flag) {
              const ParentIds = this.setParentCheck(parent)
              this.selectedIds = this.selectedIds.filter(id => !ParentIds.includes(id))
            }
          } else if (checkedChildrenCount == parent.dson.length && flag) {
            // 改为全选样式
            const ParentIds = this.setParentCheck(parent)
            console.log(ParentIds)
            parent.indeterminate = false
            this.selectedIds = [...new Set([...this.selectedIds, ...ParentIds])]
          }
          this.updateIndeterminateState(parent, parent.indeterminate)
        }
      } else { // 遍历到顶级，停止
        return null
      }
      console.log(this.orgtList)
    },
    // 选中当前节点的所有子节点
    selectAllChildren(items) {
      let parent = null
      for (let i = 0; i < this.orgtList.length; i++) {
        parent = this.findParent(this.orgtList[i], items.parentId)
        if (parent != null) {
          break
        }
      }
      if (parent != null) {
        if (parent.dson.length > 1) {
          // 查询收集当前节点的所有孩子
          const childIds = this.collectChildIdsRecursive(items.dson)
          this.selectedIds = [...new Set([...this.selectedIds, ...childIds])]
          this.updateIndeterminateState(items, true)
        } else {
          // 如果没有姐妹就将父节点也全部选中
          const ParentIds = this.setParentCheck(items)
          const childIds = this.collectChildIdsRecursive(items.dson)
          const list = [...new Set([...ParentIds, ...childIds])]
          this.selectedIds = [...new Set([...this.selectedIds, ...list])]
        }
      } else {
        // 如果自己就获取当前节点下的全部节点
        const childIds = this.collectChildIdsRecursive(items.dson)
        this.selectedIds = [...new Set([...this.selectedIds, ...childIds])]
      }
    },
    // 取消选中当前节点的所有子节点
    invertChildrenSelection(items) {
      let parent = null
      for (let i = 0; i < this.orgtList.length; i++) {
        parent = this.findParent(this.orgtList[i], items.parentId)
        if (parent != null) {
          break
        }
      }
      if (parent != null) {
        if (parent.dson.length > 1) {
          const childIds = this.collectChildIdsRecursive(items.dson)
          this.selectedIds = this.selectedIds.filter(id => !childIds.includes(id))
          this.updateIndeterminateState(items, false)
        } else {
          const childIds = this.collectChildIdsRecursive(items.dson)
          const ParentIds = this.setParentCheck(items)
          this.selectedIds = this.selectedIds.filter(id => !childIds.includes(id))
          this.selectedIds = this.selectedIds.filter(id => !ParentIds.includes(id))
        }
      } else {
        const childIds = this.collectChildIdsRecursive(items.dson)
        this.selectedIds = this.selectedIds.filter(id => !childIds.includes(id))
      }
      // const childIds = this.collectChildIdsRecursive(items.dson);
      // const ParentIds=this.setParentCheck(items)
      // this.selectedIds = this.selectedIds.filter(id => !childIds.includes(id));
      // this.selectedIds = this.selectedIds.filter(id => !ParentIds.includes(id));
    },
    // 递归收集节点及其子节点的ID
    collectChildIdsRecursive(items, result = []) {
      items.forEach(item => {
        result.push(item.id)
        if (item.dson) this.collectChildIdsRecursive(item.dson, result)
      })
      return result
    },
    // 递归收集父节点
    setParentCheck(row, result = []) {
      let parent = null
      result.push(row.id)
      for (let i = 0; i < this.orgtList.length; i++) {
        parent = this.findParent(this.orgtList[i], row.parentId)
        if (parent != null) {
          break
        }
      }

      if (parent != null) {
        this.setParentCheck(parent, result)
      } else { // 遍历到顶级，停止
        return result
      }
      return result
    },
    // 查递归找该行的父节点
    findParent(row, id) {
      if (row.id == id) {
        return row
      }
      if (row.dson) {
        let parent = null
        for (let i = 0; i < row.dson.length; i++) {
          parent = this.findParent(row.dson[i], id)
          if (parent) {
            break
          }
        }
        return parent
      } else {
        return null
      }
    }
  }
}
</script>

  <style lang="scss" scoped>
  .el-checkbox-group{
    display: inline-flex;
   }
  </style>
